<template>
  <div>
  <el-container>
    <el-header>
      <div>{{currentNickname }}：您好！</div>
      <!-- 右侧：下拉菜单 -->
      <div style="float: right;">
        <el-dropdown @command="handleCommand" >
            <span class="el-dropdown-link" >
              更多操作<i class="el-icon-arrow-down el-icon--right" ></i>
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="editProfile">修改个人信息</el-dropdown-item>
              <el-dropdown-item command="systemInfo">系统说明</el-dropdown-item>
              <el-dropdown-item command="logout">系统登出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <el-aside style="width: 180px">
        <Left_menu :roleid="roleid"/>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  </div>
</template>

<script setup>
import Left_menu from "@/components/frame/left_menu.vue";
import { useRouter } from "vue-router";
import {ref, onMounted, computed} from 'vue';
import { useUserStore } from "../../store/userStore.js";

const userStore = useUserStore();
const currentNickname = computed(() => userStore.getNickname); // 计算属性自动响应变化
const roleid = computed(() => userStore.getRoleid); // 传递给左侧菜单的 roleid
// 从 sessionStorage 中获取 nickName
// const nickName = ref(sessionStorage.getItem('nickName') || history?.state?.nickname);
// const roleid = history?.state?.roleId;
// 如果 history.state 中有 nickName，则保存到 sessionStorage 中
onMounted(() => {
  if (history?.state?.nickname) {
    sessionStorage.setItem('nickName', history?.state?.nickname);
  }
});


const router = useRouter();

const handleCommand = (command) => {
  switch (command) {
    case "editProfile":
      router.push({ path: "/EditPim" });
      break;
    case "systemInfo":
      //router.push({ path: "/systemInfo" });
        alert("系统开发中...");
      break;
    case "logout":
      router.push({ path: "/login" });
      break;
  }
}


</script>

<style scoped>

</style>